<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_test</title>
	</head>
	<body>
		<div id="demo1">
			<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
			<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
		</div>
	</body>
</html>
<script src="js/vue.js"></script>
<script type="text/javascript">
	Vue.directive('drag', function(el) {
		el.onmousedown = function(ev) {
			var disX = ev.clientX - el.offsetLeft;
			var disY = ev.clientY - el.offsetTop;

			document.onmousemove = function(ev) {
				var l = ev.clientX - disX;
				var t = ev.clientY - disY;
				el.style.left = l + 'px';
				el.style.top = t + 'px';
			};
			document.onmouseup = function() {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		};
	});
	var vm = new Vue({
		el: '#demo1',
		data: {
			msg: 'welcome'
		}
	});
</script>
